<#-- 修改会员 -->
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <base href="${baseURL}" target="_self">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>修改会员 - ${title}</title>
    <meta name="keywords" content="${keywords}"/>
    <meta name="description" content="${description}"/>
    <meta name="commonPath" content="${commonPath}"/>
    <link href="${commonPath}css/common.css" type="text/css" rel="stylesheet">
    <link href="${commonPath}css/themify-icons/style.css" type="text/css" rel="stylesheet">
    <script src="${commonPath}js/tool.js" type="text/javascript"></script>
    <script src="${commonPath}js/ajax.js" type="text/javascript"></script>
    <script src="${commonPath}js/json2.js" type="text/javascript"></script>
    <script src="${commonPath}js/cryptoJS/core.js" type="text/javascript"></script>
    <script src="${commonPath}js/cryptoJS/sha256.js" type="text/javascript"></script>
    <script src="${commonPath}js/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="${commonPath}js/jquery/jquery.form.js" type="text/javascript"></script>
    <link href="${commonPath}js/jcrop/css/jquery.Jcrop.min.css" type="text/css" rel="stylesheet">
    <script src="${commonPath}js/jcrop/js/jquery.Jcrop.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="${commonPath}js/jquery/jquery.letterAvatar.js"></script>

    <link href="${commonPath}js/layer/skin/default/layer.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="${commonPath}js/layer/layer.js"></script>
</head>


<script type="text/javascript">
    var commonPath = "";

    //html文件要加入<meta name="commonPath" content="${commonPath}"/>标签
    //从meta标签获取模板路径
    var meta = document.getElementsByTagName("meta");
    for (var i = 0; i < meta.length; i++) {
        if (meta[i].name == "commonPath") {
            commonPath = meta[i].getAttribute("content");
        }
    }
    //空白图片
    var blankImage = commonPath + "images/null.gif";
    //头像图层
    var avatarDiv = "<div id='avatarTag'>";
    avatarDiv += "        <div id='originalImage_box' class='original-box'><div id='image_crop_original_div' class='image-crop-original-div'></div><img id='originalImage' src='" + blankImage + "' alt='原图'></div>";
    avatarDiv += "        <div id='preview-pane' class='preview-pane'>";
    avatarDiv += "            <div id='previewImage_box' class='preview-container'>";
    avatarDiv += "                <div id='image_crop_preview_div' class='image-crop-preview-div'></div>";
    avatarDiv += "                <img id='previewImage' src='" + blankImage + "' alt='缩略图'>";
    avatarDiv += "            </div>";
    avatarDiv += "        </div>";
    avatarDiv += "        <div id='preview-pane2' class='preview-pane2'>";
    avatarDiv += "            <div id='previewImage_box2' class='preview-container2'>";
    avatarDiv += "                <div id='image_crop_preview_div2' class='image-crop-preview-div'></div>";
    avatarDiv += "                <img id='previewImage2' src='" + blankImage + "' alt='缩略图'>";
    avatarDiv += "            </div>";
    avatarDiv += "        </div>";
    avatarDiv += "</div>";


    //头像表单
    var avatarForm = "<form id='uploadImageForm' enctype='multipart/form-data'>";
    avatarForm += "    <div class='avatarModule '>";
    avatarForm += avatarDiv;

    avatarForm += "        <div class='bottomInfo'>";
    avatarForm += "            <div class='button-box'>";
    avatarForm += "                <i id='progressBar' class='progressBar'></i>&nbsp;&nbsp;";
    avatarForm += "                <span>选择图片<input type='file' style='width: 104px;' id='imgFile' name='imgFile' onchange='imgForm(this)'/></span>";
    avatarForm += "                <span class='on' id='uploadSubmit' onClick='javascript:uploadImageSubmit();'>上传</span>";
    avatarForm += "            </div>";
    avatarForm += "        </div>";
    avatarForm += "   </div>";
    avatarForm += "</form>";


    //显示/隐藏 更改头像层
    $(function () {
        $("#updateAvatarLink").hide(); // 默认隐藏所有内层元素
        $(".updateAvatar").hover(function () {  // 鼠标经过事件
            $(this).find("#updateAvatarLink").toggle();  // 切换显示和隐藏
        }, function () {
            $(this).find("#updateAvatarLink").toggle();  // 切换显示和隐藏

        });
    });


    //更换头像弹出层
    function avatarLayer() {
        var div = avatarForm;
        layer.open({
            type: 1,
            title: "更换头像",
            content: div, //这里content是一个普通的String
            moveOut: true,//是否允许拖拽到窗口外
            area: ['666px', '518px'],//宽高
            success: function (layero, index) {
            }
        });
    }


    var width;// 裁剪框的宽度  
    var height;// 裁剪框的高度  
    var x;// 相对于裁剪图片x左边  
    var y;// 相对于裁剪图片y左边  

    //创建变量(在这个生命周期)的API和图像大小  
    var jcrop_api,
        boundx,//原图的宽
        boundy,//原图的高
        originalImage_realSrc,//原图路径 IE7-IE9使用
        $preview,
        $pcnt,
        $pimg,
        xsize,//预览窗口的宽
        ysize,//预览窗口的高

        $preview2,
        $pcnt2,
        $pimg2,
        xsize2,//预览窗口的宽
        ysize2,//预览窗口的高
        scaleFactor;//缩放比例

    //图像裁剪
    function imageCropp(bgColor) {
        //获取预览窗格相关信息
        $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),
            xsize = $pcnt.width(),
            ysize = $pcnt.height();

        $preview2 = $('#preview-pane2'),
            $pcnt2 = $('#preview-pane2 .preview-container2'),
            $pimg2 = $('#preview-pane2 .preview-container2 img'),
            xsize2 = $pcnt2.width(),
            ysize2 = $pcnt2.height();
        $('#originalImage').Jcrop({
            onChange: updatePreview,//选框改变时的事件
            //	onSelect: updatePreview,//创建选框，参数格式为：[x,y,x2,y2]
            setSelect: [0, 0, 200, 200],//创建默认选框，参数格式为：[x,y,x2,y2]
            aspectRatio: 1,//选框宽高比。说明：width/height
            boxWidth: 400,//画布宽度
            boxHeight: 400,//画布高度
            minSize: [200, 200],//选框最小尺寸 格式： [0,0]
            bgColor: bgColor,//背景颜色  默认"black"	 透明#00000000
            allowSelect: false,//允许新选框
            allowResize: true//允许选框缩放

        }, function () {
            //使用API来获得真实的图像大小
            var bounds = this.getBounds();//获取图片实际尺寸，格式为：[w,h]
            boundx = bounds[0];
            boundy = bounds[1];

            //初始化预览图
            updatePreview(this.tellSelect());//tellSelect()获取选框的值（实际尺寸）。例子：console.log(jcrop_api.tellSelect())


            scaleFactor = this.getScaleFactor();//获取图片缩放的比例，格式为：[w,h]
            //jcrop_api变量中存储API
            jcrop_api = this;
            //预览进入jcrop容器css定位
            $preview.appendTo(jcrop_api.ui.holder);
            $preview2.appendTo(jcrop_api.ui.holder);
        });


    }


    /**
     * 更新预览
     * @param select 选区 选框的值（实际尺寸）
     */
    function updatePreview(select) {
        var browserVersion = window.navigator.userAgent.toUpperCase();
        if (browserVersion.indexOf("MSIE") > -1 && browserVersion.indexOf("MSIE 6") <= -1) {//IE7-IE9
            thumbnailPreview(select);
        } else {
            //设置预览
            if (parseInt(select.w) > 0) {

                var rx = xsize / select.w;//select.w 代表选区的宽
                var ry = ysize / select.h;//select.h 代表选区的高
                $pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * select.x) + 'px',
                    marginTop: '-' + Math.round(ry * select.y) + 'px'
                });

                var rx2 = xsize2 / select.w;//select.w 代表选区的宽
                var ry2 = ysize2 / select.h;//select.h 代表选区的高
                $pimg2.css({
                    width: Math.round(rx2 * boundx) + 'px',
                    height: Math.round(ry2 * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx2 * select.x) + 'px',
                    marginTop: '-' + Math.round(ry2 * select.y) + 'px'
                });

            }
        }


        // 赋值
        x = select.x;
        y = select.y;
        width = select.w;
        height = select.h;
    };

    /**
     * ie7+缩略图预览
     * @param select 选区
     * @param bounds 实际内容
     */
    function thumbnailPreview(select) {

        //设置预览
        if (parseInt(select.w) > 0) {
            var rx = xsize / select.w;//select.w 代表选区的宽
            var ry = ysize / select.h;//select.h 代表选区的高
            $("#image_crop_preview_div").css(
                "filter",
                "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + originalImage_realSrc + "')"
            );

            $("#image_crop_preview_div").css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * select.x) + 'px',
                marginTop: '-' + Math.round(ry * select.y) + 'px'
            });

            var rx2 = xsize2 / select.w;//select.w 代表选区的宽
            var ry2 = ysize2 / select.h;//select.h 代表选区的高

            $("#image_crop_preview_div2").css(
                "filter",
                "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + originalImage_realSrc + "')"
            );

            $("#image_crop_preview_div2").css({
                width: Math.round(rx2 * boundx) + 'px',
                height: Math.round(ry2 * boundy) + 'px',
                marginLeft: '-' + Math.round(rx2 * select.x) + 'px',
                marginTop: '-' + Math.round(ry2 * select.y) + 'px'
            });
        }
    }


    //选择文件
    function imgForm(file) {
        if (!verificationImageFormat(file)) {
            return;
        }
        if (jcrop_api) {
            jcrop_api.destroy();//移除 Jcrop
        }

        readImagePath(file, function (src) {

            $("#avatarTag").html(avatarDiv);

            var browserVersion = window.navigator.userAgent.toUpperCase();
            if (browserVersion.indexOf("MSIE") > -1 && browserVersion.indexOf("MSIE 6") <= -1) {//IE7-IE9
                originalImage_realSrc = src;

                //设置原图预览滤镜
                $("#image_crop_original_div").css(
                    "filter",
                    "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + src + "')"
                );
                //获取图片实际大小（由于使用缩放滤镜scale必须指定div宽高，无法做到自适应，因此先通过image滤镜获取实际大小）
                var bounds = getImageBounds(src);
                //按比例缩放图片
                var param = clacImgZoomParam(400, 400, bounds.w, bounds.h);

                $("#image_crop_original_div").width(param.width);
                $("#image_crop_original_div").height(param.height);

                //需要对透明的img使用绝对定位并设置offset为预览div的offset，避免jcrop无法覆盖在预览div上面
                $("#originalImage").css("position", "absolute");
                $("#originalImage").css("display", "inline-block");
                $("#originalImage").offset($("#image_crop_original_div").offset());
                $("#originalImage").width(bounds.w);
                $("#originalImage").height(bounds.h);
                $("#originalImage").attr("src", blankImage);
                $("#originalImage").attr("realSrc", src);

                imageCropp("#00000000");
            } else {//支持html5浏览器
                $('#originalImage').attr('src', src);
                $('#previewImage').attr('src', src);
                $('#previewImage2').attr('src', src);

                imageCropp("black");
            }
        });
    }

    /**
     * 获取图片的实际大小
     * @param tmpSrc 图片源
     * @return {w,h} 宽和高
     */
    function getImageBounds(tmpSrc) {
        var imgObj = new Image();
        imgObj.src = tmpSrc;
        var width = imgObj.width;
        var height = imgObj.height;
        if ((typeof width == "undefined" || width == 0) && (typeof height == "undefined" || height == 0)) {
            var picpreview = document.getElementById("originalImage_box");
            var tempDiv = document.createElement("div");
            picpreview.appendChild(tempDiv);
            tempDiv.style.width = "10px";
            tempDiv.style.height = "10px";
            tempDiv.style.diplay = "none";
            tempDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='" + tmpSrc + "');";
            tempDiv.ID = "previewTemp" + new Date().getTime();
            width = tempDiv.offsetWidth;
            height = tempDiv.offsetHeight;
            picpreview.removeChild(tempDiv);
        }
        return {w: width, h: height};
    };

    /**
     * 按比例缩放图片
     * @param maxWidth 图片最大宽度
     * @param maxHeight 图片最大高度
     * @param width 图片实际宽度
     * @param height 图片实际高度
     * @return {width,height} 宽和高
     */
    function clacImgZoomParam(maxWidth, maxHeight, width, height) {
        var param = {
            width: width,
            height: height
        };
        if (width > maxWidth || height > maxHeight) {
            var rateWidth = width / maxWidth;
            var rateHeight = height / maxHeight;

            if (rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }

        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }


    //读取图片路径  file：file控件 prvid: 图片预览容器
    function readImagePath(file, callback) {
        var supportHTML5 = false;
        var browserVersion = window.navigator.userAgent.toUpperCase();
        if (file.files) {
            supportHTML5 = true;
        } else {
            supportHTML5 = false;
        }
        //进行浏览器判断，选择对应的实现方式
        if (supportHTML5) {
            for (var i = 0, f; f = file.files[i]; i++) {
                var fr = new FileReader();
                fr.onload = function (e) {
                    var src = e.target.result;
                    showPrvImg(src);
                }
                fr.readAsDataURL(f);
            }

        } else if (browserVersion.indexOf("MSIE") > -1 && browserVersion.indexOf("MSIE 6") > -1) {//IE6
            showPrvImg(file.value);
        } else if (browserVersion.indexOf("MSIE") > -1 && browserVersion.indexOf("MSIE 6") <= -1) {//IE7-IE9
            file.select();
            //如果是ie9需要触发blur事件，避免被安全规则阻拦
            if (browserVersion.indexOf("MSIE 9") > -1) {
                file.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问

            }

            var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
            showPrvImg(reallocalpath);
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//FIREFOX
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            var src;
            if (firefoxVersion < 7) {// firefox7以下版本
                src = file.files[0].getAsDataURL();

            } else {// firefox7.0+
                src = window.URL.createObjectURL(file.files[0]);
            }
            showPrvImg(src);
        }

        function showPrvImg(src) {
            callback(src);
        }
    }


    //验证图片格式
    function verificationImageFormat(file) {
        var array = new Array('gif', 'jpg', 'jpeg', 'png', 'bmp'); //可以上传的文件类型
        if (file.value == '') {
            layer.open({
                type: 1,
                title: "错误",
                content: "文件不能为空",
                area: ['260px', '120px'],//宽高
                success: function (layero, index) {
                    return false;
                }
            });
        } else {
            //获取最后一个.的位置
            var index = file.value.lastIndexOf(".");
            //获取后缀
            var ext = file.value.substr(index + 1);

            //循环判断图片的格式是否正确
            for (var i in array) {
                if (ext.toLowerCase() == array[i].toLowerCase()) {
                    return true;
                }
            }
            layer.open({
                type: 1,
                title: "错误",
                content: "<div style='line-height: 30px; font-size: 14px; margin-left: 8px;margin-right: 8px;'>只允许上传gif、jpg、jpeg、bmp、png格式</div>",
                area: ['260px', '120px'],//宽高
                success: function (layero, index) {
                    return false;
                }
            });

        }
    }

    //提交上传图片
    function uploadImageSubmit() {

        //按钮设置 disabled="disabled"
        document.getElementById("uploadSubmit").disabled = true;
        if (width == null) {
            layer.open({
                type: 1,
                title: "错误",
                content: "<div style='line-height: 30px; font-size: 14px; margin-left: 8px;margin-right: 8px;'>请先选择图片</div>",
                area: ['260px', '120px'],//宽高
                success: function (layero, index) {

                }
            });
            //按钮设置 disabled="disabled"
            document.getElementById("uploadSubmit").disabled = false;
            return false;

        }
        //Math.round(number)四舍五入取整
        var _width = Math.round(width);
        var _height = Math.round(height);
        var _x = Math.round(x);
        var _y = Math.round(y);
        if (_x < 0) {
            _x = 0;
        }
        if (_y < 0) {
            _y = 0;
        }

        var context = "?width=" + _width + "&height=" + _height + "&x=" + _x + "&y=" + _y;

        $("#uploadImageForm").ajaxSubmit({
            dataType: 'json',//提交成功后返回的数据格式，可选值包括xml，json或者script
            type: 'POST',// 提交类型可以是"GET"或者"POST"
            url: 'user/control/updateAvatar' + context,// 表单提交的路径
            beforeSend: function () {//表单提交前做表单验证

            },
            //进度条的监听器
            xhr: function () {

                var xhr = $.ajaxSettings.xhr();
                if (onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress", onprogress, false);
                    return xhr;
                }
            },
            success: function (data) {//提交成功后调用
                var returnValue = JSON.parse(data);//JSON转为对象
                for (var key in returnValue) {
                    if (key == "success") {
                        if (returnValue[key] == "true") {
                            layer.msg('更新头像成功,1秒后刷新页面',
                                {
                                    time: 1000 //1秒关闭（如果不配置，默认是1秒）
                                }, function () {
                                    //关闭后的操作
                                    document.location.reload();//刷新页面
                                }
                            );
                        }
                    } else if (key == "error") {
                        var errorValue = returnValue[key];
                        var htmlValue = "";
                        var i = 0;
                        for (var error in errorValue) {
                            if (error != "") {
                                i++;
                                htmlValue += "&nbsp;&nbsp;" + i + "、" + errorValue[error] + "<br>";
                            }
                        }

                        layer.open({
                            type: 1,
                            title: '错误',
                            skin: 'layui-layer-rim', //加上边框
                            area: ['300px', '150px'], //宽高
                            content: htmlValue
                        });
                    }

                }
                //按钮设置 disabled="disabled"
                document.getElementById("uploadSubmit").disabled = false;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //jquery请求session过期跳转
                timeoutJump(XMLHttpRequest);
            }
        });

    }

    //侦查当前文件上传情况
    function onprogress(evt) {
        //侦查附件上传情况
        //通过事件对象侦查
        //该匿名函数表达式大概0.05-0.1秒执行一次
        // console.log(evt.loaded);  //已经上传大小情况
        //evt.total; 附件总大小
        var loaded = evt.loaded;
        var tot = evt.total;
        var per = Math.floor(100 * loaded / tot);  //已经上传的百分比
        var son = document.getElementById('progressBar');
        son.innerHTML = per + "%";
        son.style.width = per + "%";
    }
</script>


<BODY>
<#-- 引入页头 -->
<@include action="${newPublic_2}"/>
<div class="skeleton">
    <div class="main backgroundModule">
        <#-- 引入服务导航 -->
        <@include action="${newPublic_4}"/>

        <form id="editUserForm" method="post" autocomplete="off" action="user/control/editUser">
            <!-- 令牌标记 -->
            <input type="hidden" id="token" name="token" value="${token}">
            <div class="editUserModule">
                <div class="blankTableModule">
                    <div class="updateAvatar">
                        <a href="javascript:void(0);" onclick="javascript: avatarLayer(); return false;">
                            <div id="updateAvatarLink" class="change" style="display: none;"><span>更换头像</span></div>
                        </a>

                        <#if user.avatarName != null>
                            <img src="${user.avatarPath}${user.avatarName}">
                        <#else>
                            <!--[if (IE)]><img src="${commonPath}images/min_avata.png"><![endif]-->
                            <!--[if !(IE)]><!--><img
                                avatar="${(user.nickname != null && user.nickname??) ?string(user.nickname , user.userName)}"><!--<![endif]-->
                        </#if>
                    </div>

                    <div class="box">
                        <div class="form">
                            <div class="form-field">
                                <div id="userName_field_error" class="form-field-container">
                                    <div class="form-field-radio">
                                        <div class="form-field-radio-container">
                                            <div class="form-field-radio-input">
                                                <div>${user.userName}</div>
                                                <label class="form-field-label form-field-active">用户名</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-field">
                                <div id="nickname_field_error" class="form-field-container">
                                    <#--                                    <#if user.nickname != null && user.nickname??>-->
                                    <#--                                        <div class="form-field-radio">-->
                                    <#--                                            <div class="form-field-radio-container">-->
                                    <#--                                                <div class="form-field-radio-input">-->
                                    <#--                                                    <div>${user.nickname}</div>-->
                                    <#--                                                    <label class="form-field-label form-field-active">呢称</label>-->
                                    <#--                                                </div>-->
                                    <#--                                            </div>-->
                                    <#--                                        </div>-->
                                    <#--                                    <#else>-->
                                    <div class="form-field-text">
                                        <div class="form-field-input-container">
                                            <input id="nickname" maxLength="20" class="form-field-text-input"
                                                   type="text" value="${user.nickname}"
                                                   onfocus="inputBoxClickTip(this);"
                                                   onblur="inputBoxOutTip(this);">
                                            <label class="form-field-label">呢称</label>
                                        </div>
                                    </div>
                                    <#--                                    </#if>-->
                                    <div id="nickname_prompt_error" class="form-field-prompt-error"></div>
                                    <div class="form-field-help">不设置请留空</div>
                                </div>
                            </div>
                            <#if userRoleList?? && userRoleList?size gt 0>
                                <div class="form-field">
                                    <div id="role_field_error" class="form-field-container">
                                        <div class="form-field-radio">
                                            <div class="form-field-radio-container">
                                                <div class="form-field-radio-input">
                                                    <div>
                                                        <table cellSpacing="0" cellPadding="0" width="100%" border="0">
                                                            <#list userRoleList as userRole>
                                                                <tr>
                                                                    <td style="text-align:left;width: 200px;line-height: 28px;">
                                                                        ${userRole.name}
                                                                    </td>
                                                                    <td style="text-align:left;">
                                                                        ${userRole.validPeriodEnd} 到期
                                                                    </td>
                                                                </tr>
                                                            </#list>
                                                        </table>
                                                    </div>
                                                    <label class="form-field-label form-field-active">角色</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </#if>
                            <div class="form-field">
                                <div id="allowUserDynamic_field_error" class="form-field-container">
                                    <div class="form-field-radio">
                                        <div class="form-field-radio-container">
                                            <div class="form-field-radio-input">
                                                <label>
                                                    <input type="radio" class="formRadio" name="allowUserDynamic"
                                                           value="true" <#if user.allowUserDynamic ==true> checked='checked'</#if>>
                                                    <span class="formRadio-core"></span>
                                                    <span class="formRadio-text">显示</span>
                                                </label>
                                                <label>
                                                    <input type="radio" class="formRadio" name="allowUserDynamic"
                                                           value="false" <#if user.allowUserDynamic ==false> checked='checked'</#if>>
                                                    <span class="formRadio-core"></span>
                                                    <span class="formRadio-text">关闭</span>
                                                </label>
                                            </div>
                                            <label class="form-field-label form-field-active">允许显示用户动态</label>
                                        </div>
                                    </div>
                                    <div id="allowUserDynamic_prompt_error" class="form-field-prompt-error"></div>
                                </div>
                            </div>

                            <div class="form-field">
                                <div id="oldPassword_field_error" class="form-field-container">
                                    <div class="form-field-text">
                                        <div class="form-field-input-container">
                                            <input id="oldPassword" maxLength="20" class="form-field-text-input"
                                                   type="password" value="" onfocus="inputBoxClickTip(this);"
                                                   onblur="inputBoxOutTip(this);">
                                            <label class="form-field-label">旧密码</label>
                                        </div>
                                    </div>
                                    <div id="oldPassword_prompt_error" class="form-field-prompt-error"></div>
                                </div>
                            </div>
                            <div class="form-field">
                                <div id="password_field_error" class="form-field-container">
                                    <div class="form-field-text">
                                        <div class="form-field-input-container">
                                            <input id="password" maxLength="20" class="form-field-text-input"
                                                   type="password" value="" onfocus="inputBoxClickTip(this);"
                                                   onblur="inputBoxOutTip(this);">
                                            <label class="form-field-label">密码</label>
                                        </div>
                                    </div>
                                    <div id="password_prompt_error" class="form-field-prompt-error"></div>
                                </div>
                            </div>
                            <div class="form-field">
                                <div id="confirmPassword_field_error" class="form-field-container">
                                    <div class="form-field-text">
                                        <div class="form-field-input-container">
                                            <input id="confirmPassword" maxLength="20" class="form-field-text-input"
                                                   type="password" value="" onfocus="inputBoxClickTip(this);"
                                                   onblur="inputBoxOutTip(this);">
                                            <label class="form-field-label">确认密码</label>
                                        </div>
                                    </div>
                                    <div id="confirmPassword_prompt_error" class="form-field-prompt-error"></div>
                                </div>
                            </div>
                            <!-- 用户自定义注册功能项 -->
                            <#list userCustomList as userCustom>
                                <#if userCustom.chooseType ==1>
                                    <div class="form-field">
                                        <div id="userCustom_${userCustom.id}_field_error" class="form-field-container">
                                            <div class="form-field-text">
                                                <div class="form-field-input-container">
                                                    <input name="userCustom_${userCustom.id}" size="${userCustom.size}"
                                                           maxlength="${userCustom.maxlength}"
                                                           class="form-field-text-input" type="text"
                                                           value="<#list userCustom.userInputValueList as userInputValue>${userInputValue.content}</#list>"
                                                           onfocus="inputBoxClickTip(this);"
                                                           onblur="inputBoxOutTip(this);">
                                                    <label class="form-field-label"><#if userCustom.required == true>
                                                            <span class="required">*</span></#if>${userCustom.name}
                                                    </label>
                                                </div>
                                            </div>
                                            <div id="userCustom_${userCustom.id}_prompt_error"
                                                 class="form-field-prompt-error"></div>
                                            <div class="form-field-help">${userCustom.tip}</div>
                                        </div>
                                    </div>
                                </#if>
                                <#if userCustom.chooseType ==2>
                                    <#if userCustom.itemValue?has_content>
                                        <div class="form-field">
                                            <div id="userCustom_${userCustom.id}_field_error"
                                                 class="form-field-container">
                                                <div class="form-field-radio">
                                                    <div class="form-field-radio-container">
                                                        <div class="form-field-radio-input">
                                                            <#list userCustom.itemValue?keys as itemValue>
                                                            <#-- 选中项 -->
                                                                <#assign _checked = "">
                                                                <#list userCustom.userInputValueList as userInputValue>
                                                                    <#if userInputValue.options == itemValue>
                                                                        <#assign _checked=" checked='checked'">
                                                                    </#if>
                                                                </#list>

                                                            <#-- 默认选第一项 -->
                                                                <#if itemValue_index == 0  && userCustom.userInputValueList?? && userCustom.userInputValueList?size == 0>
                                                                    <#assign _checked = " checked='checked'">
                                                                </#if>

                                                                <label>
                                                                    <input type="radio" class="formRadio"
                                                                           name="userCustom_${userCustom.id}"
                                                                           value="${itemValue}" ${_checked}>
                                                                    <span class="formRadio-core"></span>
                                                                    <span class="formRadio-text">${userCustom.itemValue[itemValue]}</span>
                                                                </label>

                                                            </#list>
                                                        </div>
                                                        <label class="form-field-label form-field-active"><#if userCustom.required == true>
                                                                <span class="required">*</span></#if>${userCustom.name}
                                                        </label>
                                                    </div>
                                                </div>
                                                <div id="userCustom_${userCustom.id}_prompt_error"
                                                     class="form-field-prompt-error"></div>
                                                <div class="form-field-help">${userCustom.tip}</div>
                                            </div>
                                        </div>
                                    </#if>

                                </#if>
                                <#if userCustom.chooseType ==3>
                                    <#if userCustom.itemValue?has_content>
                                        <div class="form-field">
                                            <div id="userCustom_${userCustom.id}_field_error"
                                                 class="form-field-container">
                                                <div class="form-field-radio">
                                                    <div class="form-field-radio-container">
                                                        <div class="form-field-radio-input">
                                                            <#list userCustom.itemValue?keys as itemValue>
                                                            <#-- 选中项 -->
                                                                <#assign _checked = "">
                                                                <#list userCustom.userInputValueList as userInputValue>
                                                                    <#if userInputValue.options == itemValue>
                                                                        <#assign _checked=" checked='checked'">
                                                                    </#if>
                                                                </#list>
                                                                <label>
                                                                    <input type="checkbox" class="formCheckbox"
                                                                           name="userCustom_${userCustom.id}"
                                                                           value="${itemValue}" ${_checked}>
                                                                    <span class="formCheckbox-core"></span>
                                                                    <span class="formCheckbox-text">${userCustom.itemValue[itemValue]}</span>
                                                                </label>
                                                            </#list>
                                                        </div>
                                                        <label class="form-field-label form-field-active"><#if userCustom.required == true>
                                                                <span class="required">*</span></#if>${userCustom.name}
                                                        </label>
                                                    </div>
                                                </div>
                                                <div id="userCustom_${userCustom.id}_prompt_error"
                                                     class="form-field-prompt-error"></div>
                                                <div class="form-field-help">${userCustom.tip}</div>
                                            </div>
                                        </div>
                                    </#if>
                                </#if>
                                <#if userCustom.chooseType ==4>
                                    <div class="form-field">
                                        <div id="userCustom_${userCustom.id}_field_error" class="form-field-container">
                                            <div class="form-field-radio">
                                                <div class="form-field-radio-container">
                                                    <div class="form-field-radio-input">
                                                        <select class="formSelect"
                                                                name="userCustom_${userCustom.id}" <#if userCustom.multiple == true> multiple='multiple'</#if> <#if userCustom.selete_size != null> size='${userCustom.selete_size}'</#if>>
                                                            <#if userCustom.itemValue?has_content>
                                                                <#list userCustom.itemValue?keys as itemValue>
                                                                    <#assign _selected = "">
                                                                    <#list userCustom.userInputValueList as userInputValue>
                                                                        <#if userInputValue.options == itemValue>
                                                                            <#assign _selected=" selected='selected'">
                                                                        </#if>
                                                                    </#list>
                                                                    <option value="${itemValue}" ${_selected}>${userCustom.itemValue[itemValue]}</option>
                                                                </#list>
                                                            </#if>
                                                        </select>
                                                    </div>
                                                    <label class="form-field-label form-field-active"><#if userCustom.required == true>
                                                            <span class="required">*</span></#if>${userCustom.name}
                                                    </label>
                                                </div>
                                            </div>
                                            <div id="userCustom_${userCustom.id}_prompt_error"
                                                 class="form-field-prompt-error"></div>
                                            <div class="form-field-help">${userCustom.tip}</div>
                                        </div>
                                    </div>
                                </#if>
                                <#if userCustom.chooseType ==5>
                                    <div class="form-field">
                                        <div id="userCustom_${userCustom.id}_field_error" class="form-field-container">
                                            <div class="form-field-radio">
                                                <div class="form-field-radio-container">
                                                    <div class="form-field-radio-input">
                                                        <textarea class="formTextarea"
                                                                  name="userCustom_${userCustom.id}"
                                                                  rows="${userCustom.rows}"
                                                                  cols="${userCustom.cols}"><#list userCustom.userInputValueList as userInputValue>${userInputValue.content}</#list></textarea>
                                                    </div>
                                                    <label class="form-field-label form-field-active"><#if userCustom.required == true>
                                                            <span class="required">*</span></#if>${userCustom.name}
                                                    </label>
                                                </div>
                                            </div>
                                            <div id="userCustom_${userCustom.id}_prompt_error"
                                                 class="form-field-prompt-error"></div>
                                            <div class="form-field-help">${userCustom.tip}</div>
                                        </div>
                                    </div>
                                </#if>
                            </#list>

                        </div>
                    </div>
                    <div id="token_prompt_error" style="color: red;">${(error['token'])!}</div>
                    <div id="user_prompt_error" style="color: red;">${(error['user'])!}</div>
                    <div class="submitButton-box">
                        <a href="javascript:void(0);" onClick="javascript:ajaxSubmit()" tabindex="6">提&nbsp;交</a>
                    </div>
                </div>
            </div>
        </form>

    </div>
</div>
<#--引入页脚-->
<@include action="${newPublic_3}"/>


<script type="text/javascript">
    $(".form-field").find(".form-field-input-container").bind("mousedown", function (e) {
        $(this).find(".form-field-text-input").focus();

        if ($(this).find(".form-field-label").hasClass("form-field-active")) {
            return;

        }
        $(this).find(".form-field-label").addClass("form-field-active");
    });

    $(document).mousedown(function (e) {
        var target = $(e.target);
        if (target.closest(".form-field-input-container").length == 0) {
            $(".form-field-input-container").each(function () {
                if ($(this).find(".form-field-label").hasClass("form-field-active")) {
                    if ($(this).find('input[type="text"]').val() == "" || $(this).find('input[type="password"]').val() == "") {
                        $(this).find(".form-field-label").removeClass("form-field-active");
                    }

                }
            });
        }
    });
    //文本框含有默认值时字段名称缩小
    $(document).ready(function () {
        $(".form-field-input-container").each(function () {
            if (!$(this).find(".form-field-label").hasClass("form-field-active")) {
                if (($(this).find('input[type="text"]').val() != undefined && $(this).find('input[type="text"]').val() != '')
                    || $(this).find('input[type="password"]').val() != undefined && $(this).find('input[type="password"]').val() != '') {
                    $(this).find(".form-field-label").addClass("form-field-active");
                }

            }
        });
    });


    //监听Tab键
    $(document).on('keyup', function (e) {
        if (e.keyCode == 9) {
            var input = $(this).find('input:focus');
            if (input.length) {
                if (!input.parent().parent().find(".form-field-label").hasClass("form-field-active")) {
                    input.parent().parent().find(".form-field-label").addClass("form-field-active");
                }
            }
        }
    });
    //解决提交按钮的click和blur事件冲突
    $(document).ready(function () {
        $("input[type='button']").mousedown(function (e) {
            e.preventDefault();
        });
        $("a[href='javascript:void(0);']").mousedown(function (e) {
            e.preventDefault();
        });

    });
</script>
<script type="text/javascript">
    //点击输入框提示
    function inputBoxClickTip(obj) {


    }

    //离开输入框提示
    function inputBoxOutTip(obj) {
        verification(obj.id);
    }

    //验证参数
    function verification(field) {
        $("#" + field + "_prompt_error").hide();
        $("#" + field + "_field_error").removeClass("form-field-error");

        if (field == "password") {//密码
            var password = $("#" + field).val().trim();
            if (password != "") {
                if (getStringLeng(password) < 7) {
                    $("#" + field + "_prompt_error").html("密码长度不能小于7位");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
                if (getStringLeng(password) > 20) {
                    $("#" + field + "_prompt_error").html("密码长度不能大于20位");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
            }

        }
        if (field == "confirmPassword") {//确认密码
            var confirmPassword = $("#" + field).val().trim();
            var password = $("#password").val().trim();
            if (confirmPassword != password) {
                $("#" + field + "_prompt_error").html("两次密码不相等");
                $("#" + field + "_prompt_error").show();
                $("#" + field + "_field_error").addClass("form-field-error");
                return false;
            }
        }
        return true;
    }


    //组装参数
    function getParameter() {
        var parameter = "";

        //令牌标记
        var token = $("#token").val();
        parameter += "&token=" + token;


        //呢称
        var nickname = $("#nickname").val();
        if (nickname != null) {
            parameter += "&nickname=" + encodeURIComponent(nickname.trim());
        }

        var allowUserDynamic_radio = document.getElementsByName("allowUserDynamic");
        for (var i = 0; i < allowUserDynamic_radio.length; i++) {
            if (allowUserDynamic_radio[i].checked) {
                parameter += "&allowUserDynamic=" + allowUserDynamic_radio[i].value;
            }
        }

        //密码需SHA256加密
        var password = $("#password").val().trim();
        if (password != "") {
            parameter += "&password=" + CryptoJS.SHA256(password);

            var oldPassword = $("#oldPassword").val().trim();
            if (oldPassword != "") {
                parameter += "&oldPassword=" + CryptoJS.SHA256(oldPassword);
            }
        }

        //自定义表单name集合
        var array = new Array();

        //读取表单所有的input标签
        var all_input = document.getElementsByTagName("input");
        for (var i = 0; i < all_input.length; i++) {
            var obj = all_input[i];
            if (obj.name.substring(0, 11) == "userCustom_") {
                var isExist = false;//是否已存在数组中
                //如果存在，则不添加
                for (var j = 0; j < array.length; j++) {
                    if (array[j] == all_input[i].name) {
                        isExist = true;
                        break;
                    }
                }
                if (isExist == false) {
                    array.push(all_input[i].name);
                }
            }
        }
        //读取表单所有的select标签
        var all_select = document.getElementsByTagName("select");
        for (var i = 0; i < all_select.length; i++) {
            var obj = all_select[i];
            if (obj.name.substring(0, 11) == "userCustom_") {
                var isExist = false;//是否已存在数组中
                //如果存在，则不添加
                for (var j = 0; j < array.length; j++) {
                    if (array[j] == all_select[i].name) {
                        isExist = true;
                        break;
                    }
                }
                if (isExist == false) {
                    array.push(all_select[i].name);
                }
            }
        }
        //读取表单所有的textarea标签
        var all_textarea = document.getElementsByTagName("textarea");
        for (var i = 0; i < all_textarea.length; i++) {
            var obj = all_textarea[i];
            if (obj.name.substring(0, 11) == "userCustom_") {
                var isExist = false;//是否已存在数组中
                //如果存在，则不添加
                for (var j = 0; j < array.length; j++) {
                    if (array[j] == all_textarea[i].name) {
                        isExist = true;
                        break;
                    }
                }
                if (isExist == false) {
                    array.push(all_textarea[i].name);
                }
            }
        }

        for (var i = 0; i < array.length; i++) {
            //读取表单参数
            var obj = document.getElementsByName(array[i]);
            if (obj[0].type == "text") {//输入框

                parameter += "&" + obj[0].name + "=" + encodeURIComponent(obj[0].value);
            }
            if (obj[0].type == "radio") {//单选
                for (var j = 0; j < obj.length; j++) {
                    if (obj[j].checked) {
                        parameter += "&" + obj[0].name + "=" + obj[j].value;
                        break;
                    }
                }
            }
            if (obj[0].type == "checkbox") {//多选
                for (var j = 0; j < obj.length; j++) {
                    if (obj[j].checked) {
                        parameter += "&" + obj[0].name + "=" + obj[j].value;
                    }
                }
            }
            if (obj[0].type.substring(0, 6) == "select") {//下拉列表
                for (var j = 0; j < obj[0].length; j++) {
                    if (obj[0][j].selected) {
                        parameter += "&" + obj[0].name + "=" + obj[0][j].value;
                    }
                }
            }
            if (obj[0].type == "textarea") {//表单域
                parameter += "&" + obj[0].name + "=" + encodeURIComponent(obj[0].value);

            }
        }


        //删除第一个&号,防止因为多了&号而出现警告: Parameters: Invalid chunk ignored.信息
        if (parameter.indexOf("&") == 0) {
            parameter = parameter.substring(1, parameter.length);
        }
        return parameter;
    }

    //验证全部参数
    function allVerification() {
        var isVerification = true;
        if (verification("password") == false) {
            isVerification = false;
        }
        if (verification("confirmPassword") == false) {
            isVerification = false;
        }
        return isVerification;
    }

    //ajax提交
    function ajaxSubmit() {

        if (allVerification() == false) {
            //需引入layer
            layer.msg('请填好资料再提交', {
                    time: 1000 //1秒关闭（如果不配置，默认是1秒）
                }, function () {//关闭后的操作

                }
            );
            return;
        }

        var parameter = getParameter();
        if (parameter.indexOf("&") == 0) {
            parameter = parameter.substring(1, parameter.length);
        }
        post_request(function (value) {
            if (value != "") {
                var returnValue = JSON.parse(value);//JSON转为对象
                for (var key in returnValue) {
                    if (key == "success") {
                        var success = returnValue[key];
                        if (success == "true") {
                            //需引入layer
                            layer.msg('修改成功，即将刷新当前页面', {
                                    time: 1000 //1秒关闭（如果不配置，默认是1秒）
                                }, function () {//关闭后的操作
                                    //刷新当前在页面
                                    window.location.reload();
                                }
                            );
                        }
                    } else if (key == "error") {
                        var errorValue = returnValue[key];
                        for (var error in errorValue) {
                            if (error != "") {
                                $("#" + error + "_prompt_error").html(errorValue[error]);
                                $("#" + error + "_prompt_error").show();
                                $("#" + error + "_field_error").addClass("form-field-error");
                            }
                        }
                    }
                }
            }
        },
            "user/control/editUser?&timestamp=" + new Date().getTime(), true, parameter);

    }
</script>
</BODY>

</HTML>
